<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polygon</title>
<style>
html,body,#map-canvas {
	height: 100%;
	margin: 0px;
	padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
	function getDistance(lat, lng) {
		lat = deg2rad(lat);
		lng = deg2rad(lng)
		console.log(lat, lng)
		var R = 6371000;
		var x = (lng[1] - lng[0]) * Math.cos((lat[1] + lat[0]) / 2);
		console.log(Math.cos((lat[1] + lat[0]) / 2))
		var y = (lat[1] - lat[0]);
		var d = Math.sqrt(x * x + y * y) * R;
		return d + " M";
	}
	function deg2rad(deg) {
		return [ deg[0] * (Math.PI / 180), deg[1] * (Math.PI / 180) ]
	}
	console.log(getDistance([ 0, 0 ], [ 0, .00001 ]))

	//console.log(getDistance([0, 180], [0, 180]))
	function initialize() {
		var mapOptions = {
			zoom : 11,
			//center : new google.maps.LatLng(55.9410655, -3.2053836),
			center : new google.maps.LatLng(55, 3)
		//center : new google.maps.LatLng(0, 0)
		};

		var map = new google.maps.Map(document.getElementById('map-canvas'),
				mapOptions);
		var coords = new google.maps.LatLng(55, -3)
		var marker = new google.maps.Marker({
			position : coords,
			map : map,
			title : coords.toString()
		});
		coords = new google.maps.LatLng(56, -4)
		var marker = new google.maps.Marker({
			position : coords,
			map : map,
			title : coords.toString()
		});

		/* 		var lats = [-85 0, 85];
		 var lngs = [-180, 0, 180];
		 for (var i = 0; i < lats.length; i++) {
		 for (var j = 0; j < lngs.length; j++) {
		 var coords = new google.maps.LatLng(lats[i], lngs[j]);
		 var marker = new google.maps.Marker({
		 position : coords,
		 map : map,
		 title : coords.toString()
		 });				
		 console.log(coords.toString())
		 }
		 }
		 */
		google.maps.event.addListener(map, 'bounds_changed', function() {
			var rectangle = new google.maps.Rectangle({
				strokeColor : '#FF0000',
				strokeOpacity : 0.8,
				strokeWeight : 2,
				fillColor : '#FF0000',
				fillOpacity : 0.35,
				map : map,
				//bounds: map.getBounds()
				bounds : new google.maps.LatLngBounds(new google.maps.LatLng(
						55, 3), new google.maps.LatLng(55.01, 3.02))

			});

			console.log(map.getBounds());
		});
	}
	google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
	<div id="map-canvas"></div>
</body>
</html>